<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        自定义指令
        1:配置名：directives
        2:要操作dom
        input 加属性autofocus可以自动获取焦点
        
     -->
    <div id="root">
        <p>{{n}}</p>
        <p v-big="n"></p>
        <input type="text" v-focus-bind="user">
        <button @click="n++"> n++ </button>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
    //全局的directive directive directive directive directive directive directive
    //语法 Vue.directive('指令名',配置对象) 或者是 Vue.directive('指令名',回调函数)
    Vue.directive('focus-bind',{
                //初次绑定时调用 dom.value 
                bind(element,binding){
                    element.value = binding.value
                },
                //指令所在元素被插入页面是调用 比如dom.focus() dom.parentElement.style.font-size
                inserted(element,binding){
                    element.focus()
                },
                //模板更新时调用
                update(element,binding){
                    element.value = binding.value
                }
            })
    //创建Vue
    const vm = new Vue({
        el:'#root', 
        data:{
            n:1,
            user:'liweihua'
        },
        directives:{
            //简单的指令
            big(element,binding){
                //模板编译时执行1：一开始绑定时调用2：数据n更新 模板编译就更新（包括没有绑定的数据更新也会执行）
                //console.log('big') 注意此处的this 是window
                element.innerHTML = binding.value * 10
            },
            //定义focusBind 可以让其绑定的元素自动获取焦点 用时 v-focus-bind 或者 'focus-bind'
            //这里的focus-bind 为局部的
            /* 'focus-bind':{
                //初次绑定时调用 dom.value 
                bind(element,binding){
                    element.value = binding.value
                },
                //指令所在元素被插入页面是调用 比如dom.focus() dom.parentElement.style.font-size
                inserted(element,binding){
                    element.focus()
                },
                //模板更新时调用
                update(element,binding){
                    element.value = binding.value
                }
            } */
        }
        
    })

</script>
</html>